<template>
  <div>
    <div class="flexend">
      <el-button type="primary" size="mini" class="f-14 mb_20">导出</el-button>
    </div>
    <el-table
      v-loading="loading"
      :data="tableData"
      ref="tablelayout"
      class="commtable"
    >
      <template v-for="(item, index) in tableColumns">
        <el-table-column
          :key="index"
          :label="item.label"
          align="center"
          :prop="item.key"
          :min-width="item.minWidth ? item.minWidth : ``"
          :fixed="item.fixed ? item.fixed : false"
          :show-overflow-tooltip="true"
        >
          <!--用于表格自定义-->
          <template slot-scope="scope">
            <!-- 序号 -->
            <div v-if="item.key == 'xuhao'">
              <span>{{
                (queryParams.page - 1) * queryParams.num + scope.$index + 1
              }}</span>
            </div>
            <div v-else>{{ scope.row[item.key] || "-" }}</div>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.page"
      :limit.sync="queryParams.num"
      @pagination="getList"
    />
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableColumns: [
        // { key: "主账号", label: "序号", visible: true, minWidth: 80 },
        { key: "name", label: "主账号邮箱/手机号", visible: true, minWidth: 150 },
        { key: "id", label: "主账号ID", visible: true, minWidth: 100 },
        { key: "status", label: `账户角色`, visible: true, minWidth: 100 },
        { key: "detail", label: `协作者账号`, visible: true, minWidth: 150 },
        { key: "plugName", label: `协作者有效期`, visible: true, minWidth: 150 },
        { key: "directional", label: `协作者备注`, visible: true, minWidth: 150 },
        { key: "position", label: `今日充值金额`, visible: true, minWidth: 150 },
        { key: "custom_coin", label: `累计充值总金额`, visible: true, minWidth: 150 },
        { key: "timeChange", label: `今日消耗广告币`, visible: true, minWidth: 120 },
        { key: "timeChange", label: `剩余广告币`, visible: true, minWidth: 120 },
        { key: "timeChange", label: `状态`, visible: true, minWidth: 120 },
        { key: "msg", label: `权限`, visible: true, minWidth: 240 },
      ],
      zzList: [],
      queryParams: {
        page: 1,
        num: 10,
        name: undefined,
        id: undefined,
      },
      total: 1,
      loading: false,
      tableData: [],
    };
  },
  methods:{
    getList() {
      this.loading = true;
      let params = {
        page: this.queryParams.page,
        num: this.queryParams.num
      }
      if(this.queryParams.name){
        params.name = this.queryParams.name
      }
      if(this.queryParams.id){
        params.id = this.queryParams.id
      }
      getAdvmsterList(params).then((response) => {
        this.tableData = response.data.list;
        this.total = response.data.count;
        this.loading = false;
      });
      this.loading = false;
    },
  }
};
</script>
